.user-entity-header {
  display: flex;
  padding: item-spacing(6 4 4);

  &__container {
    background-color: white;
    border-bottom: 1px solid get-color(black, 0.15);
  }

  &__img-section {
    width: 128px;
    box-sizing: border-box;
    padding-right: item-spacing(3);
  }

  &__detail-section {
    padding-left: item-spacing(5);
    width: 100%;
  }

  &__profile-img {
    $profile-img-dimensions: 104px;
    height: $profile-img-dimensions;
    width: $profile-img-dimensions;
  }

  &__external-link {
    border: 1px solid get-color(blue6);
    color: get-color(blue6);
    padding: item-spacing(2);
    line-height: 20px;
    font-size: 16px;
    font-weight: bold;

    &:hover {
      border: 1px solid get-color(black);
    }
  }

  &__user-profile {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  &__inactive-label {
    margin: item-spacing(2 0 0 3);
    padding: item-spacing(0 2);
  }

  &__name {
    &-container {
      display: flex;
    }

    margin: item-spacing(2 0 0);
    font-weight: 400;
    height: item-spacing(5) + 3;
  }

  &__job-title {
    margin: item-spacing(2 0 5);
    width: 100%;
  }

  &__user-details {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  &__focus-area {
    width: 50%;
    margin-bottom: item-spacing(5);

    &-title {
      font-weight: bold;
    }

    &-icon {
      margin-left: item-spacing(2);
      cursor: pointer;
    }

    &-content {
      width: 450px;
      text-align: justify;
      word-break: break-word;
    }

    &-skills {
      margin-bottom: item-spacing(2);
      display: flex;
      flex-wrap: wrap;
    }
  }

  &__org {
    width: 50%;
    margin-bottom: item-spacing(5);
    display: flex;
  }

  &__manager {
    width: 50%;
    padding-left: item-spacing(4);

    &-name {
      font-weight: bold;
    }

    &-img {
      margin-right: item-spacing(2);
    }
  }

  &__team {
    width: 50%;

    &-name {
      font-weight: bold;
    }

    &-tags {
      display: flex;
      flex-wrap: wrap;
    }
  }

  &__tag {
    padding: item-spacing(0 2);
    margin: item-spacing(0 2 2 0);
    cursor: default;
  }

  &__connections {
    display: flex;
    width: 100%;
    padding-top: item-spacing(4);
    border-top: 1px solid get-color(black, 0.15);
  }

  &__connection {
    font-size: 12px;
    margin-right: item-spacing(5);
    color: get-color(black, 0.9);
    cursor: pointer;

    &-icon:hover,
    &:hover {
      color: get-color(blue6);
    }

    &-link {
      color: get-color(black);
      &:hover {
        color: get-color(blue6);
      }
    }

    &-icon {
      color: get-color(blue6);
      margin-right: item-spacing(1);
      transform: scale(1.25);
    }
  }
}
